const path=require('path')
module.exports={
  entry: './src/main.js', //入口
  output: {  //出口
    path: path.resolve(__dirname,"dist"), //路径  动态获取路径  __dirname node 里面的
    filename: 'bundle.js', //文件name
    publicPath: 'dist/'   //此时打包的img里面大于limit的图片放到dist下，是重新生成了一个新文件，就是图片名改啦，但是实际引入这个图片的时候是因为的当前路径，是找不到的，需要加上这个
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        //css-loader 只负责帮你加载  style-loader 负责将样式添加到DOM上
        // 使用多个loader 的时候 他是从右，向左读取的  所以 style-loader 在左边  不然就会build 报错
        use: [  'style-loader','css-loader' ]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片 小于 limit时，会转成base64的字符串形式
              // 当加载图片，大于limit的时候，需要使用file-loader 模块加载
              limit: 14000,
              // 生成图片的name 规则  [name] 原来的名字  [hash:8] 取32位hash值的8位 [ext]后缀名
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/,
        //排除的js目录
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }

    ]
  }
}